<template>
  <div class="order-data">
    <div class="flex items-center font-31 mb-42 c2cColor">
      <span class="title" :style="{ 'color': detail.direction === 'buy' ? '#2EBD85' : '#E35461' }">
        {{ detail.direction === 'buy' ? $t('购买') : $t('卖出') }}
      </span>
      <span class="mx-15">{{ detail.symbol && detail.symbol.toUpperCase() }}</span>
      <img class="w-36 h-36" src="~@/assets/image/c2c/U1.png" alt="">
    </div>
    <van-cell-group>
      <van-cell :title="$t('总额')">
        <template #default>
          <h2 class="font-700 font-36">{{ currencySymbol }} {{ detail.amount }}</h2>
        </template>
      </van-cell>
      <van-cell :title="$t('单价')">
        <template #default>
          <span>{{ currencySymbol }} </span>
          <span>{{ detail.symbolValue }}</span>
        </template>
      </van-cell>
      <van-cell :title="$t('数量')"
        :value="`${detail.symbol == 'usdt' ? Math.floor(detail.coinAmount * 100) / 100 : Math.floor(detail.coinAmount * 1000000) / 1000000} ${detail.symbol && detail.symbol.toUpperCase()}`" />
      <slot name="default"></slot>
      <van-cell class="order-number" :title="$t('订单号')">
        <template #default>
          <div class="flex justify-end">
            <span class="mr-14">{{ detail.orderNo }}</span>
            <img class="relative top-4 w-30 h-34" src="~@/assets/image/c2c/Group1168.png" alt=""
              @click="copy(detail.orderNo)">
          </div>
        </template>
      </van-cell>
      <van-cell v-if="detail.createTime" :title="$t('创建时间')" :value="detail.createTime | format" />
      <van-cell v-if="detail.sellerName">
        <template #title>
          <span>{{ clientType }}</span>
        </template>
        <template #default>
          <span class="mr-20">{{ sellerName }}</span>
          <van-icon class="font-700 text-grey" name="arrow" />
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import {
  mapState,
  mapGetters
} from "vuex";
import { Cell, CellGroup, Icon, Toast } from "vant"

export default {
  name: "OrderDate",
  // props: ['count', 'totalPrice', 'orderNumber', 'sellerName', 'createOrderTime'],
  props: {
    clientType: {
      default: '卖家昵称'
    },
    detail: {
      type: Object,
      default() {
        return {}
      }
    },
    // // count: {},
    // totalPrice: {},
    // // orderNumber: {},
    // sellerName: {},
    // createOrderTime: {},
    // unitPrice: {
    //   // required: true,
    // }
  },
  filters: {
    format(time) {
      const _time = new Date(time)
      return [_time.getFullYear(), _time.getMonth() + 1, _time.getDate()].join('/') + ' ' + [(_time.getHours() + '').padStart(2, '0'), (_time.getMinutes() + '').padStart(2, '0'), (_time.getSeconds() + '').padStart(2, '0')].join(":")
    }
  },
  methods: {
    copy(text) {
      this.$copyText(text).then(() => {
        Toast(this.$t('复制成功'))
      })
    }
  },
  computed: {
    ...mapState('home', ['currency']),
    ...mapGetters('c2c', ['currencySymbol'])
  },
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Icon.name]: Icon,
  }
}
</script>

<style lang="scss" scoped>
::v-deep .van-cell {
  margin-bottom: 46px;
}
</style>
